/**
 * 分支列表单项占位（先跟MR一样）
 */
import React from 'react';
import Skeleton from 'react-loading-skeleton';
import withTimeoutSkeleton from './index';
import './index.scss';

class ListSkeleton extends React.PureComponent {
  render() {
    const arr = [1, 2, 3, 4];
    const { className, ...rest } = this.props;
    return (
      <div className="at-list" {...rest}>
        {arr.map((item) => {
          return (
            <div className={`skeleton-list-item mr ${className}`} key={item}>
              <div className="skeleton-list-item-img skeleton-wapper">
                <Skeleton width={32} height={32} />
              </div>
              <div className="skeleton-list-item-left">
                <div className="skeleton-list-item-left-title skeleton-wapper">
                  <Skeleton width={150} height={20} />
                </div>
                <div className="skeleton-list-item-left-desc skeleton-wapper">
                  <Skeleton width={300} height={16} />
                </div>
              </div>
              <div className="skeleton-list-item-right skeleton-wapper">
                <Skeleton width={100} height={16} />
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export default withTimeoutSkeleton(ListSkeleton);
